<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>我的任务</title>
    <!-- JS -->
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/jquery.js}" src="myconfig/bootstrap/js/jquery.js"></script>
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/bootstrap.min.js}" src="myconfig/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/myconfig/layui/layui.js}" src="myconfig/layui/layui.js"></script>
    <script type="text/javascript" th:src="@{/itemAndTask/js/jquery.params.js}" src="itemAndTask/js/jquery.params.js"></script>



    <!-- CSS -->
    <link th:href="@{/myconfig/bootstrap/css/bootstrap.min.css}" href="myconfig/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
    <link th:href="@{/myconfig/layui/css/layui.css}" href="myconfig/layui/css/layui.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>



<!--模仿bootstrap的模态框 新建子任务-->


<!-- 数据表格 -->
<table class="layui-hide" id="listTask" lay-filter="tasks"></table>

<script type="text/html" id="listTaskToolbar">
    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" lay-event="CheckDetails"><span class="layui-icon layui-icon-survey">&nbsp;查看详情及完成</span></button>
    </div>


</script>

<!-- 表格 格式 紧急状况 -->
<script type="text/html" id="itemTaskStatus">
    {{#  if(d.itemTaskStatus.statusName === '已完成'){ }}
    <span><i class="layui-badge-dot layui-bg-green"></i>{{ d.itemTaskStatus.statusName }}</span>
    {{#  } else { }}
    <span><i class="layui-badge-dot layui-bg-red"></i>{{ d.itemTaskStatus.statusName }}</span>
    {{#  } }}
</script>


<script th:inline="none">


    /* 分页查看所有区级事项 */

    //alert(itemUrengcy)
    layui.use('table', function() {
        var table = layui.table;
        var $ = layui.$;
        $.ajax({
            type: "post",
            url: "itemTask/myTaskList", // 数据接口

            success: function (result) {
                var data = result.data;
                table.render({
                    id:'tasks',
                    elem: '#listTask',
                    title:'我的任务列表',
                    toolbar: '#listTaskToolbar',
                    data: data,
                    height: 520,
                    cols: [[
                        {type: 'radio',width: '5%'}
                        , {field: 'itemTaskId', title: 'ID', sort: true, width: '10%', align: 'center'}
                        , {field: 'itemTaskWorker', title: '执行人', sort: true,width: '15%', align: 'center',
                            templet:'<div>{{d.itemTaskWorker.userName}}</div>'}
                        , {field: 'item', title: '所属事项', sort: true, width: '15%', align: 'center',
                            templet:'<div>{{d.item.itemName}}</div>'}
                        , {field: 'itemTaskStatus', title: '任务状态',sort: true, width: '15%', align: 'center',
                            templet:'#itemTaskStatus'}
                        , {field: 'itemTaskContent', title: '任务内容', width: '25%', align: 'center'}
                        , {field: 'itemTaskTime', title: '发布时间', sort: true,width: '15%', align: 'center'}

                    ]],
                    page: true, //是否显示分页
                    limits: [5, 10, 15,20], //每页显示个数
                    limit: 10, //每页默认显示的数量
                    group:5   //页码最多显示个数
                });
            }
        });

        /* 工具栏监听事件 */
        table.on('toolbar(tasks)', function(obj){     //tasks 为table表的ID
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch(obj.event){


                /* 查看一个子任务 */
                case 'CheckDetails':
                    if(checkStatus.data == ""){
                        layer.msg('请选择子任务',{
                            icon:0
                            ,time:700
                        });

                    }
                    if(checkStatus.data != "") {
                        var itemTaskId = checkStatus.data[0].itemTaskId;//获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                        var itemTaskWorker = checkStatus.data[0].itemTaskWorker;//获取选中行数据中对应的 事项 Status
                        var item = checkStatus.data[0].item;//获取选中行数据中对应的 事项 urengcy
                        var itemTaskStatus = checkStatus.data[0].itemTaskStatus;//获取选中行数据中对应的 事项 urengcy
                        var itemTaskContent = checkStatus.data[0].itemTaskContent;//获取选中行数据中对应的 事项 urengcy
                        var itemTaskTime = checkStatus.data[0].itemTaskTime;//获取选中行数据中对应的 事项 urengcy
                        var urgencyId = checkStatus.data[0].item.itemUrgency.urgenryId;//获取选中行数据中对应的 事项 urengcy
                        var itemId = checkStatus.data[0].item.itemId;//获取选中行数据中对应的 事项 urengcy
                        //alert(urgencyId)

                        var itemTaskWorker = JSON.stringify(itemTaskWorker)
                        var urengcyId = JSON.stringify(urgencyId)
                        //alert(itemTaskWorker.userName)

                        var item = JSON.stringify(item);
                        var itemTaskStatus = JSON.stringify(itemTaskStatus)

                        layui.use(['layer'],function () {
                            var layer = layui.layer,$=layui.$;
                            layer.open({
                                type: 2 //此处以iframe举例
                                ,title: '查看子任务'
                                ,area: ['500px', '450px']
                                ,shade: 0
                                ,maxmin: true
                                ,content: 'item_task_index_detile.html?itemTaskId='+itemTaskId+'&urengcyId='+urengcyId+'&itemId='+itemId
                                ,zIndex: layer.zIndex //重点1
                                ,success: function(layero){
                                    layer.setTop(layero); //重点2
                                }
                            });
                        })

                    }
                    break;


            };
        });
    });



</script>

<!--模态框-->



</body>
</html>